<template>
  <div class="sidebar-section">
    <h3>品牌筛选</h3>
    <div
        class="filter-group"
        v-for="brand in brands"
        :key="brand.id"
    >
      <label>
        <input
            type="checkbox"
            :value="brand.id"
            v-model="selectedBrands"
        > {{ brand.name }}
      </label>
    </div>
    <button
        class="submit-btn"
        style="width:100%; margin-top:10px;"
        @click="applyFilter"
    >
      确定
    </button>
  </div>
</template>

<script>
import { ref, defineEmits } from 'vue'

export default {
  setup(props, { emit }) {
    const selectedBrands = ref([])

    const brands = ref([
      { id: 'apple', name: 'Apple' },
      { id: 'samsung', name: 'Samsung' },
      { id: 'huawei', name: 'Huawei' },
      { id: 'xiaomi', name: 'Xiaomi' },
      { id: 'oppo', name: 'OPPO' }
    ])

    const applyFilter = () => {
      emit('brand-filter-applied', selectedBrands.value)
    }

    return {
      brands,
      selectedBrands,
      applyFilter
    }
  }
}
</script>

<style scoped>
.sidebar-section {
  margin-bottom: 25px;
}

.sidebar-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #212529;
}

.filter-group {
  margin-bottom: 15px;
}

.filter-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.filter-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>